<template>
	<view>
		<gui-page 
		:isLoading="pageLoading" :apiLoadingStatus="apiLoadingStatus" 
		:loadmore="true" @loadmorefun="getList" ref="guipage">
			<view slot="gBody">
				<view class="my-list ">
					<navigator class="gui-list-items" v-for="(item,index) in rechargeHistory" :key="item.id">
						<view class="gui-list-body gui-border-b">
							<view>
								<text class="gui-primary-color gui-text-small gui-color-gray gui-bg-gray" style="padding: 5rpx;">{{reason[item.remark]}}</text>
							</view>
							<view class="gui-list-title" style="padding:15rpx 0;">
								
								<text class="gui-list-title-text gui-primary-color">{{item.change}} 页</text>
								<text class="gui-list-title-desc gui-color-gray">余额 {{item.balance}} 页</text>
							</view>
							<text class="gui-list-body-desc gui-color-gray gui-text-small gui-text-right">{{item.create_at}}</text>
						</view>
					</navigator>
				</view>
			</view>
		</gui-page>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				rechargeHistory:[],
				page:1,
				pageLoading      : true,
				// 用于记录是否有 api 请求正在执行
				apiLoadingStatus : false,
				//余额变动原因
				reason:[
					//1 充值 增加 2打印减少 3活动奖励 4取消订单返还 
					'','充值增加','打印减少','活动奖励','取消订单返还'
				]
			}
		},
		onLoad:function(){
			this.getList();
			this.pageLoading = false
		},
		methods: {
			getList:function(){
				this.apiLoadingStatus = true;
				this.$http.request({
					url:'auth.BalanceChange/getChange',
					method:'POST',
					data:{
						page:this.page
					},
					withToken:true
				}).then(res=>{
					
						this.page++
						console.log(res.list)
						this.rechargeHistory.push.apply(this.rechargeHistory,res.list)
						this.$refs.guipage.stoploadmore();
						// 假定第3页加载了全部数据，通知组件不再加载更多
						// 实际开发由接口返回值来决定
						if(this.page > res.page.pages){
							this.$refs.guipage.nomore();
						}
						this.apiLoadingStatus = false;
				}).catch(err=>{
					console.log(err)
				})
			}
		}
	}
</script>
<style>
.my-list{margin:30rpx 0; padding:0 30rpx;}
</style>